<template>
<card-wrapper class="wrapper">
  <el-scrollbar class="scrollbar">
    <el-menu class="menu" @select="handleSelect" :default-active="this.$route.query.id">
      <el-menu-item class="menu-item" v-for="contact in contactList" :key="contact.user.id" :index="contact.user.id.toString()">
        <contact-ele :contact="contact"></contact-ele>
      </el-menu-item>
    </el-menu>
  </el-scrollbar>
</card-wrapper>
</template>

<script>
import CardWrapper from "@/CardWrapper.vue";
import ContactEle from "@/views/ChatView/ContactEle.vue";

export default {
  name: "ContactList",
  props: {
    contactList: {
      type: Array,
      default: () => []
    }
  },
  components: {ContactEle, CardWrapper},
  data() {
    return {
    }
  },
  methods: {
    handleSelect(index) {
      this.$emit("select", index);
      this.$router.push({path: "/chat", query: {id: index}});
    }
  },
  created() {
  }

}
</script>

<style scoped>
.wrapper {
  height: 100%;
}
.scrollbar {
  width: 100%;
}
.menu {
  border: 0;
}
.menu-item {
  height: 100px;
  padding: 0 5px;
}
</style>